<template>
    <el-dialog v-model:model-value="state.deteleBool" destroy-on-close :title="props.title" center :width="304"
        :show-close="false" append-to-body :before-close="handleClose">
        <div class="detele-main">
            <!-- <img v-if="data.error" src="@/assets/imgs/vector 2.png" alt="" srcset="" /> -->
            <p class="title2">{{ props.password }}</p>
            <div class="flex justify-center">
                <ElButton type="primary" @click="buttonClick(false)" v-copy="props.password">{{ t('复制密码') }}</ElButton>
            </div>
            <slot>
            </slot>
        </div>
    </el-dialog>
</template>

<script lang="tsx" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElDialog } from 'element-plus'
import { reactive, watch } from "vue"
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
    title: {
        type: String,
        default: () => ""
    },
    deteleBool: {
        type: Boolean,
        default: () => false
    },
    password: {
        type: String,
        default: () => ""
    }
})
watch(() => props.deteleBool, (newValue: any) => {
    state.deteleBool = newValue
})
const state = reactive({
    deteleBool: false
})
const handleClose = () => {
    emit('deteleClick', false)
}
const emit = defineEmits(['deteleClick'])
const buttonClick = (val) => {
    emit('deteleClick', val)
    copyText()
}
function copyText() {
    // 获取需要复制的元素以及元素内的文本内容
    const text = props.password;
    // 添加一个input元素放置需要的文本内容
    const copyContent = document.createElement('input');
    copyContent.value = text;
    document.body.appendChild(copyContent);
    // 选中并复制文本到剪切板
    copyContent.select();
    document.execCommand('copy');
    // 移除input元素
    document.body.removeChild(copyContent);
    // console.log('复制成功');
    ElMessage({
        type: 'success',
        message: '复制成功',
    })
}
</script>
<style lang="less">
.el-dialog__header {

    .el-dialog__title {
        font-size: 20px;
        font-family: 'HarmonyOS Sans SC-Medium, HarmonyOS Sans SC';
        font-weight: 500;
        color: #3D3D3D;
    }

}

.el-dialog--center .el-dialog__body {
    padding: 0px 25px 25px 30px;
    // height: 56px;
    // display: flex;
    // justify-content:space-around;
    // align-items: center;
}
</style>
<style lang="less" scoped>
.detele-main {


    img {
        width: 58px;
        height: 58px;
    }

    p {
        font-size: 20px;
        font-family: 'HarmonyOS Sans SC-Medium, HarmonyOS Sans SC';
        font-weight: 500;
        color: #3D3D3D;
    }

    .title2 {
        font-size: 14px;
        font-family: 'HarmonyOS Sans SC-Medium, HarmonyOS Sans SC';
        font-weight: 500;
        color: #1C53D9;
        text-align: center;
        margin: 0;
        margin-bottom: 21px;

    }

    .el-button {
        width: 82px;
    }

}
</style>